<template>
  <div class="quote-search-page">
    <header class="page-header">
      <div class="title-wrap">
        <h2>报价查询</h2>
        <span class="sub">输入产品编码，打开对应报价海报页面</span>
      </div>
      <div class="actions">
        <div class="search-box main" :class="{ error: !!error }">
          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <circle cx="11" cy="11" r="8" />
            <path d="m21 21-4.35-4.35" />
          </svg>
          <input
            v-model.trim="code"
            placeholder="输入产品编码，例如: P20250101"
            @keyup.enter="openPoster"
          />
          <button class="btn primary sm" @click="openPoster">打开</button>
        </div>
        <p v-if="error" class="error-tip">{{ error }}</p>
      </div>
    </header>
    <section class="helper card">
      <h3 class="helper-title">使用说明</h3>
      <ul class="helper-list">
        <li>在上方输入框中键入完整的产品编码后按 Enter 或点击“打开”。</li>
        <li>如果编码无效或页面不存在，新的标签页可能显示空白或错误信息。</li>
      </ul>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
const code = ref('');
const error = ref('');
const origin = computed(() => window.location.origin);

function openPoster() {
  const value = code.value.trim();
  if (!value) {
    error.value = '请先输入产品编码';
    return;
  }
  error.value = '';
  const url = `${origin.value}/quote-poster/${encodeURIComponent(value)}`;
  window.open(url, '_blank');
}
</script>

<style scoped>
.quote-search-page { display:flex; flex-direction:column; gap:1.4rem; animation: pageSlideIn .6s cubic-bezier(.16,1,.3,1); }
@keyframes pageSlideIn { from {opacity:0; transform: translateY(20px);} to {opacity:1; transform:translateY(0);} }
.page-header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:1rem; padding:1rem 1.25rem 1.05rem; background:linear-gradient(145deg,#ffffff,#f8fafc); border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 4px 20px -4px rgba(15,23,42,.15),0 2px 8px -2px rgba(15,23,42,.1); position:relative; overflow:hidden; }
.page-header:before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,#3b82f6,#8b5cf6,#06b6d4); opacity:.8; }
.title-wrap { display:flex; flex-direction:column; gap:.4rem; }
.title-wrap h2 { margin:0; font-size:24px; font-weight:700; letter-spacing:-.025em; color:#0f172a; background:linear-gradient(135deg,#1e293b,#475569); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.title-wrap .sub { font-size:13px; color:#64748b; font-weight:500; letter-spacing:.01em; }
.actions { display:flex; flex-direction:column; gap:.6rem; align-items:flex-end; flex:1; min-width:260px; }
.search-box { display:flex; align-items:center; gap:.6rem; padding:.65rem .85rem; border:1px solid #cbd5e1; border-radius:14px; background:#fff; min-width:320px; transition:all .3s cubic-bezier(.4,0,.2,1); position:relative; }
.search-box.main { width:100%; max-width:540px; }
.search-box:focus-within { border-color:#3b82f6; box-shadow:0 0 0 4px rgba(59,130,246,.15),0 4px 12px -2px rgba(59,130,246,.2); transform:translateY(-1px); }
.search-box.error { border-color:#dc2626; box-shadow:0 0 0 4px rgba(220,38,38,.12); }
.search-icon { width:20px; height:20px; color:#6b7280; transition:color .3s; }
.search-box:focus-within .search-icon { color:#3b82f6; }
.search-box input { border:none; outline:none; font-size:15px; flex:1; font-weight:500; color:#374151; }
.search-box input::placeholder { color:#94a3b8; font-weight:400; }
.btn { position:relative; cursor:pointer; border:1px solid transparent; padding:.65rem 1.1rem; border-radius:12px; font-size:14px; font-weight:600; letter-spacing:.025em; line-height:1; display:inline-flex; align-items:center; gap:.45rem; transition:all .3s cubic-bezier(.4,0,.2,1); }
.btn.primary { background:linear-gradient(135deg,#3b82f6,#2563eb); color:#fff; border-color:#2563eb; }
.btn.primary:hover { background:linear-gradient(135deg,#2563eb,#1d4ed8); transform:translateY(-2px); box-shadow:0 6px 18px -4px rgba(37,99,235,.45); }
.btn.sm { padding:.5rem .9rem; font-size:13px; border-radius:10px; }
.error-tip { margin:0; font-size:12px; color:#dc2626; font-weight:500; }
.helper.card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:1.1rem 1.25rem 1.3rem; box-shadow:0 4px 20px -4px rgba(15,23,42,.12),0 2px 8px -2px rgba(15,23,42,.08); display:flex; flex-direction:column; gap:.75rem; }
.helper-title { margin:0; font-size:16px; font-weight:600; letter-spacing:.01em; color:#0f172a; }
.helper-list { margin:0; padding-left:1.15rem; display:flex; flex-direction:column; gap:.35rem; font-size:13px; line-height:1.55; color:#475569; }
.helper-list code { background:#f1f5f9; padding:.15rem .35rem; border-radius:5px; font-size:12px; border:1px solid #e2e8f0; }
@media (max-width:640px){ .search-box.main { max-width:100%; } .actions { align-items:stretch; } }
</style>
